<template>
  <div>
    <ContentTitle :info="ctInfo">
      <el-button
        type="primary"
        size="small"
        style="height: 40px"
        @click="showDialog"
        >新增密钥</el-button
      >
    </ContentTitle>

    <el-table class="mt-5" :data="list" border style="width: 100%" stripe>
      <el-table-column align="center" prop="id" label="编号"> </el-table-column>
      <el-table-column
        align="center"
        prop="cTime" 
        label="创建时间"
      >
      </el-table-column>
      <el-table-column align="center" prop="tag" label="标签">
      </el-table-column>
      <el-table-column align="center" prop="authority" label="权限">
      </el-table-column>
      <el-table-column
        align="center"
        prop="online"
        :formatter="onlineFormat"
        label="状态"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            @click="handleDelete(scope.$index, scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog width="400px" center title="新增密钥" :visible.sync="show">
      <el-form :model="form">
        <el-form-item v-if="editing" label="编号" label-width="120px">
          <el-input disabled v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标签" label-width="120px">
          <el-input v-model="form.tag" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限" label-width="120px">
          <el-input v-model="form.authority" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="120px">
          <el-select v-model="form.online" placeholder="请选择活动区域">
            <el-option label="使用中" :value="true"></el-option>
            <el-option label="未使用" :value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { $securityAdd, $securityDel, $securityEdit, $securityList } from "../../api";
import moment from "moment";
import ContentTitle from "@/components/ContentTitle";

export default {
  components: {
    ContentTitle,
  },

  data() {
    return {
      $index: -1, // 当前修改的行下标
      editing: false,
      ctInfo: {
        type: "安全",
        text: "密钥",
        msg: "展示所有自定义的测量类型，提供了添加测量类型、修改测量类型、删除测量类型等功能。",
      },

      // 显示弹窗
      show: false,
      // 表单
      form: {
        id: "",
        tag: "",
        authority: "",
        online: "",
      },

      list: [
        {
          id: "440000197011063888",
          cTime: 1634477176314,
          uTime: 1634479052695,
          lTime: 1634477176314,
          tag: "普通用户2222",
          authority: "82",
          online: false,
        },
      ],
    };
  },

  created() {
    this.getList();
  },

  methods: {
    // 显示对话框
    showDialog() {
      // 显示对话框
      this.show = true;
      // 改变editing的状态
      this.editing = false;
      // 情况表单内容
      this.form = {};
    },

    // 编辑
    handleEdit($index, row) {
      // 点击编辑,editing为true,点击新增editing为false
      this.editing = true;
      this.show = true;
      // 把要修改的行下标保存起来
      this.$index = $index;
      // 把改行数据添加到表单,需要用深拷贝,不然即使不发送请求, 数据也会被修改
      this.form = {...row}; 
    },
    // 删除
    handleDelete($index, row) {
      this.$confirm("确定删除吗?", "温馨提示!").then((res) => {
        let params = {
          id: row.id,
        };
        $securityDel(params).then((res) => {
          // 将改行数据删除
          this.list.splice($index, 1);
          this.$message({
            type: "success",
            message: "删除成功",
          });
        });
      });
    },

    // 添加密钥
    submit() {
      let params = this.form;
      // editing为true,去编辑, 否则新增
      if (this.editing) {
        $securityEdit(params).then(res=> {
          // 根据下标修改数据
          // this.list[this.$index] = this.form; // 直接赋值不生效,vue2.x的缺陷
          // 使用splice触发更改
          this.list.splice(this.$index,1,res.data); 
          this.$message({
            type:'success',
            message: '编辑成功'
          })
          this.show = false;
        });
      } else {
        $securityAdd(params).then((res) => {
          // 关闭弹窗
          this.show = false;
          // 把新增数据添加到tablel
          this.list.unshift(res.data);
          this.$message({
            type: "success",
            message: "新增成功",
          });
        });
      }
    },

    // 格式化online
    onlineFormat(row, column, cellValue, index) {
      let text = cellValue ? "使用中" : "未使用";
      return text;
    },
   
    getList() {
      $securityList().then((res) => {
        this.list = res.data;
      });
    },
  },
};
</script>
